<template>
  <div class="histogram">
    <!-- 标题 -->
    <div class="histogram-title">{{ $t("pledge.j7rbdcrz") }}</div>
    <!-- 背景 -->
    <div class="histogram-bg">
      <div class="histogram-bg-item"></div>
      <div class="histogram-bg-item"></div>
      <div class="histogram-bg-item"></div>
      <div class="histogram-bg-item"></div>
      <div class="histogram-bg-item"></div>
      <div class="histogram-bg-item"></div>
      <!-- 内容布局 -->
      <div class="histogram-content items-center" v-if="list.length > 0">
        <div
          class="histogram-content-item items-center"
          v-for="(item, index) in list"
          :key="item.id"
        >
          <!-- <div class="histogram-content-item-value">
            {{ toThousands(item.amount) }}
          </div> -->
          <div class="histogram-content-item-pillars">
            <div
              class="histogram-content-item-pillars-value"
              :style="{ height: item.height }"
            >
              <DhTooltip
                style="flex: 1"
                :offsetSj="20"
                :offset="-20"
                width="88px"
                @init-call="(call) => tooltips.push(call)"
              >
                <div
                  class="histogram-content-item-value"
                  @click="tooltipClick(index, item)"
                >
                  {{ toThousands(item.amount) }}
                </div>
                <template v-slot:content>
                  <div class="tooltip-text">
                    {{ toThousands(item.amount) }}
                  </div>
                </template>
              </DhTooltip>
            </div>
          </div>
          <div class="histogram-content-item-time">
            {{ item.time }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="histogram">
import { recentIncome } from "@/api/pledge";
import { toThousands, decimalToLength } from "@/utils";
import { useDateFormat } from "@vueuse/core";
import DhTooltip from "../mvp/dh-tooltip.vue";

const list = ref([]);

onMounted(() => {
  let max = 0;
  recentIncome({ cache: true }).then((res) => {
    // console.log("7日数据---", res);
    if (res) {
      // 1. 找最大值
      res.forEach((element: any) => {
        max = Math.max(element.amount, max);
      });
      // 2. 计算最大值
      max = max / 0.75;
      // 3. 赋值数组
      list.value = res.map((element: any, index: number) => {
        element.height = `${(Number(element.amount) / max) * 100}%`;
        element.time = useDateFormat(Number(element.statisticDate), "DD/MMM", {
          locales: "en-US",
        }).value;
        element.id = index;
        return element;
      });
    }
  });
});

//  显示提示
const tooltips = ref([]);
const tooltipClick = (idx: number, item: any) => {
  if (item.amount <= 0) return;
  (tooltips.value[idx] as any)(true);
};
</script>
<style scoped lang="scss">
.histogram {
  border-radius: 12 * 2px;
  background-color: #fff;
  padding: 15 * 2px 10 * 2px 5 * 2px 10 * 2px;
  &-title {
    color: #141924;
    font-size: 15 * 2px;
    font-weight: 590;
    padding-bottom: 10 * 2px;
    margin-bottom: 20 * 2px;
  }
  &-bg {
    position: relative;
    padding-bottom: 30 * 2px;
    &-item {
      height: 20 * 2px;
      width: 100%;
      border-bottom: 1.5px dashed #e8eaf0;
    }
  }
  &-content {
    width: 100%;
    justify-content: flex-start;
    position: absolute;
    bottom: 13 * 2px;
    left: 0;
    &-item {
      width: calc(100% / 7);
      flex-direction: column;
      justify-content: center;
      &-value {
        @include multi-line-omit(1);
        margin-top: -45px;
        margin-left: -45px;
        width: 100px;
        text-align: center;
        color: #141924;
        font-size: 10 * 2px;
      }
      &-pillars {
        position: relative;
        width: 8 * 2px;
        height: 124 * 2px;
        // background: linear-gradient(180deg, #007bff 0%, #38d8e2 100%);
        background-color: transparent;
        margin-bottom: 5 * 2px;
        &-value {
          position: absolute;
          bottom: 0;
          width: 8 * 2px;
          border-top-left-radius: 1.5 * 2px;
          border-top-right-radius: 1.5 * 2px;
          background: linear-gradient(180deg, #007bff 0%, #38d8e2 100%);
        }
      }
      &-time {
        color: #c2c4ca;
        font-size: 10 * 2px;
        text-align: center;
      }
    }
  }
}
.tooltip {
  &-text {
    padding: 6 * 2px 10 * 2px;
    color: #fff;
    font-size: 11 * 2px;
  }
}
</style>
